<!DOCTYPE html>
<html lang="zh">
<head>
	<th:block th:include="include/include :: header('组件示例')" />
	<link href="../static/css/jquery-ui-1.10.4.min.css" th:href="@{/css/jquery-ui-1.10.4.min.css}" rel="stylesheet"/>
</head>
<style>
    .example-content{margin:10px;background:#fff;padding:10px;border-radius:4px;}
    .exa-one{}
    .ui-helper-hidden-accessible{    display: none;}
</style>
<body class="gray-bg">
    <div class="example-content">
    	<div>
    	<p>使用方法：</p>
    	<p>1、选择机构点击出现弹窗，点击节点前面的复选框选中节点本身以及子节点，点击节点本身只选中该节点。</p>
    	<p>2、选择用户默认不可操作，当选了机构后才可操作，通过选择的机构请求用户列表，输入文本搜索选择用户。</p>
    	<p>注：这两个组件用的接口示例，请根据自己项目需求更换接口地址、入参方式、返回数据组装。</p>
    	</div>
		<form role="form" class="form-horizontal m-t">
			<div class="exa-one form-group">
				<label class="col-sm-3 control-label">选择机构：</label>
				<div class="col-sm-6">
					<!-- <a class="btn btn-success" onclick="selectDept()" >选择机构</a> -->
					<input class="form-control form-control-dept" type="text" placeholder="请选择机构" name="deptName" autocomplete="off"  onclick="selectDept()" id="treeName" >
				</div>
			</div>	
			
			<div class="exa-one form-group">
				<label class="col-sm-3 control-label">选择用户（单选）：</label>
				<div class="col-sm-6">
					<input id="autoSelect" disabled class="form-control exa-input" placeholder="请输入搜索"/>
				</div>
			</div>
			
			<div class="exa-one form-group">
				<label class="col-sm-3 control-label">选择用户（多选）：</label>
				<div class="col-sm-6">
					<input id="autoSelectMu" disabled class="form-control exa-input" placeholder="请输入搜索"/>
				</div>
			</div>
		</form>
      
    </div>
    
    
   <th:block th:include="include/include :: footer" />
   <script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
   <script th:src="@{/pages/tool/example/example.js}"></script>
   <script type="text/javascript">

   </script>
</body>
</html>
